<script setup lang="ts">
import { download, get, loadFile, message, post } from '@/utils'
//import Modal from './Modal.vue'
import useModal from '@/hooks/useModal'
import useTable, { MyProColumns } from '@/hooks/useTable'
import useValueEnum from '@/hooks/useValueEnum'
import MoneyList from './components/MoneyList.vue'
import { BtnPermission } from '@/enum/permission'
import ChangeLevel from './components/ChangeLevel.vue'
const { store: moneyStore } = useModal()
const { store: levelStore } = useModal()
const { formatColumns } = useTable()
const selectedKeys = ref([])
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()
const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/admin/place/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const { valueEnum: levelValueEnum } = useValueEnum('/server-shop/admin/place/level/list', {
  label: 'level',
  value: 'name',
})
const columns = formatColumns([
  {
    title: '用户信息',
    dataIndex: 'userInfo',
    fixed: 'left',
    align: 'left',
  },
  {
    title: '直接推荐',
    dataIndex: 'directCount',
    width: 120,
    sorter: true,
  },
  {
    title: '间接推荐',
    dataIndex: 'indirectCount',
    width: 120,
    sorter: true,
  },
  {
    title: '状态',
    dataIndex: 'placeStatus',
    width: 120,
    hideInSearch: false,
    valueEnum: {
      0: { text: '冻结', status: 'Error' },
      1: {
        text: '正常',
        status: 'Success',
      },
    },
  },
  {
    title: '分销等级',
    dataIndex: 'placeLevel',
    width: 200,
    valueEnum: levelValueEnum,
    hideInSearch: false,
  },
  {
    title: '操作',
    dataIndex: 'options',
    width: 200,
    fixed: 'right',
    btnList: [
      {
        permission: BtnPermission.编辑,
        name: '变更等级',
        handle: ({ record }) => levelStore.handleShow(record),
      },
      {
        name: '冻结',
        hidden: ({ record }) => record.placeStatus == 0,
        type: 'popconfirm',
        tip: '确认冻结该用户吗',
        permission: BtnPermission.编辑,
        handle: ({ record }) => {
          post({ url: '/server-shop/admin/place/freeze', data: { id: record.userId } }, ({ code, msg }) => {
            if (code == 200) actionRef.value.reload()
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
          })
        },
      },
      {
        name: '解冻',
        hidden: ({ record }) => record.placeStatus == 1,
        type: 'popconfirm',
        permission: BtnPermission.编辑,
        tip: '确认解冻该用户吗',
        handle: ({ record }) => {
          post({ url: '/server-shop/admin/place/freeze/remove', data: { id: record.userId } }, ({ code, msg }) => {
            if (code == 200) actionRef.value.reload()
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
          })
        },
      },
      {
        permission: BtnPermission.查看,
        name: '佣金记录',
        handle: ({ record }) => moneyStore.handleShow(record),
      },
    ],
  },
])
const batchChange = () => {
  console.log('🚀 ~ batchChange ~ selectedKeys:', selectedKeys)
  if (selectedKeys.value.length) {
    levelStore.handleShow({ userId: selectedKeys.value })
  } else {
    message({
      type: 'warning',
      content: '至少选择一条数据后操作！',
    })
  }
}
</script>

<template>
  <div class="page">
    <ProTable
      :columns="columns"
      :request="request"
      row-key="userId"
      :form-ref="ref => (formRef = ref)"
      v-model:selectedKeys="selectedKeys"
      :row-selection="{
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false,
      }"
      :pagination="pagination"
      header-title=" "
      column-resizable
      :scroll="{ x: 1000 }"
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
    >
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #tool-bar>
        <a-button type="primary" @click="batchChange" class="mb10" v-permission="[BtnPermission.编辑]">
          <template #icon>
            <icon-select-all />
          </template>
          变更等级
        </a-button>
      </template>
      <template #userInfo="{ record }">
        <a-space>
          <a-image width="40" :src="record.userAvatar" />
          <div>
            <p>{{ record.userNickName }}</p>
            <p>{{ record.userMobile }}</p>
          </div>
        </a-space>
      </template>
    </ProTable>
    <!-- <Modal v-if="store.show" v-model:show="store.show" :id="store.id" @confirm="actionRef.reload" /> -->
    <MoneyList v-if="moneyStore.show" v-model:show="moneyStore.show" :id="moneyStore.info.userId" />
    <ChangeLevel v-if="levelStore.show" v-model:show="levelStore.show" :level="levelStore.info.placeLevel" :id="levelStore.info.userId" @confirm="actionRef.reload" />
  </div>
</template>
